<template>
  <q-page class="q-pa-md">
    <!-- 搜索头部 -->
    <div class="row items-center justify-between q-mb-lg">
      <div class="row items-center q-gutter-md">
        <q-icon name="search" color="primary" size="32px" />
        <div>
          <h5 class="q-ma-none">搜索结果</h5>
          <div class="text-caption text-grey-6">
            关键词: "{{ searchKeyword }}" | 共找到
            {{ filteredResults.length }} 个结果
          </div>
        </div>
      </div>

      <!-- 筛选和排序工具栏 -->
      <div class="row items-center q-gutter-sm">
        <!-- 文件类型筛选 -->
        <q-select
          v-model="fileTypeFilter"
          :options="fileTypeOptions"
          outlined
          dense
          style="min-width: 120px"
          @update:model-value="handleFilterChange"
        >
          <template v-slot:prepend>
            <q-icon name="filter_list" />
          </template>
        </q-select>

        <!-- 排序方式 -->
        <q-select
          v-model="sortBy"
          :options="sortOptions"
          outlined
          dense
          style="min-width: 120px"
          @update:model-value="handleSortChange"
        >
          <template v-slot:prepend>
            <q-icon name="sort" />
          </template>
        </q-select>

        <!-- 排序顺序 -->
        <q-select
          v-model="sortOrder"
          :options="sortOrderOptions"
          outlined
          dense
          style="min-width: 100px"
          @update:model-value="handleSortChange"
        >
          <template v-slot:prepend>
            <q-icon
              :name="sortOrder === 'asc' ? 'arrow_upward' : 'arrow_downward'"
            />
          </template>
        </q-select>

        <q-btn
          flat
          round
          :icon="searching ? 'sync' : 'refresh'"
          :loading="searching"
          @click="performSearch"
        >
          <q-tooltip>重新搜索</q-tooltip>
        </q-btn>
      </div>
    </div>

    <!-- 选择工具栏 -->
    <div v-if="selectedItems.length > 0" class="selection-toolbar-top q-mb-md">
      <q-card>
        <q-card-section class="q-pa-sm">
          <div class="row items-center justify-between">
            <span class="text-caption">
              已选择 {{ selectedItems.length }} 项
            </span>
            <div class="row q-gutter-sm">
              <q-btn
                flat
                round
                dense
                icon="download"
                @click="handleBatchDownload"
              >
                <q-tooltip>批量下载</q-tooltip>
              </q-btn>
              <q-btn flat round dense icon="delete" @click="handleBatchDelete">
                <q-tooltip>批量删除</q-tooltip>
              </q-btn>
              <q-btn flat round dense icon="close" @click="clearSelection">
                <q-tooltip>取消选择</q-tooltip>
              </q-btn>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>

    <!-- 搜索结果列表 -->
    <div v-if="filteredResults.length > 0" class="search-results">
      <!-- 桌面端表格视图 -->
      <div class="desktop-view">
        <div class="item-header">
          <div class="header-checkbox">
            <q-checkbox
              v-model="selectAll"
              @update:model-value="toggleSelectAll"
              :indeterminate="isPartiallySelected"
            />
          </div>
          <div class="header-name" @click="sortByField('filename')">
            名称
            <q-icon
              v-if="sortBy === 'filename'"
              :name="sortOrder === 'asc' ? 'arrow_upward' : 'arrow_downward'"
              size="16px"
            />
          </div>
          <div class="header-path">路径</div>
          <div class="header-type" @click="sortByField('file_type')">
            类型
            <q-icon
              v-if="sortBy === 'file_type'"
              :name="sortOrder === 'asc' ? 'arrow_upward' : 'arrow_downward'"
              size="16px"
            />
          </div>
          <div class="header-time" @click="sortByField('last_modified')">
            修改时间
            <q-icon
              v-if="sortBy === 'last_modified'"
              :name="sortOrder === 'asc' ? 'arrow_upward' : 'arrow_downward'"
              size="16px"
            />
          </div>
          <div class="header-size" @click="sortByField('size')">
            大小
            <q-icon
              v-if="sortBy === 'size'"
              :name="sortOrder === 'asc' ? 'arrow_upward' : 'arrow_downward'"
              size="16px"
            />
          </div>
        </div>

        <div
          v-for="item in paginatedResults"
          :key="item.full_path"
          class="item-row"
          :class="{ selected: selectedItems.includes(item) }"
          @click="toggleSelection(item)"
          @dblclick="handleItemDoubleClick(item)"
        >
          <div class="item-checkbox">
            <q-checkbox v-model="selectedItems" :val="item" @click.stop />
          </div>
          <div class="item-name">
            <q-icon
              :name="getFileIcon(item)"
              :color="getFileColor(item)"
              size="20px"
              class="q-mr-sm"
            />
            <span class="text-weight-medium">
              <span v-html="highlightKeyword(item.filename)"></span>
            </span>
          </div>
          <div class="item-path">
            <span
              v-html="highlightKeyword(getParentPath(item.full_path))"
            ></span>
          </div>
          <div class="item-type">{{ getFileTypeText(item) }}</div>
          <div class="item-time">{{ formatTime(item.last_modified) }}</div>
          <div class="item-size">{{ formatSize(item.size) }}</div>
        </div>
      </div>

      <!-- 移动端卡片视图 -->
      <div class="mobile-view">
        <div
          v-for="item in paginatedResults"
          :key="item.full_path"
          class="mobile-item-card"
          :class="{ selected: selectedItems.includes(item) }"
          @click="toggleSelection(item)"
          @dblclick="handleItemDoubleClick(item)"
        >
          <div class="mobile-item-header">
            <q-checkbox v-model="selectedItems" :val="item" @click.stop />
            <q-icon
              :name="getFileIcon(item)"
              :color="getFileColor(item)"
              size="24px"
              class="q-ml-sm"
            />
            <div class="mobile-item-name">
              <span
                class="text-weight-medium"
                v-html="highlightKeyword(item.filename)"
              ></span>
            </div>
          </div>
          <div class="mobile-item-details">
            <div class="mobile-item-path">
              <q-icon name="folder" size="14px" color="grey-5" />
              <span
                class="text-caption text-grey-6"
                v-html="highlightKeyword(getParentPath(item.full_path))"
              ></span>
            </div>
            <div class="mobile-item-meta">
              <span class="text-caption text-grey-6">{{
                getFileTypeText(item)
              }}</span>
              <span class="text-caption text-grey-6 q-mx-sm">•</span>
              <span class="text-caption text-grey-6">{{
                formatSize(item.size)
              }}</span>
              <span class="text-caption text-grey-6 q-mx-sm">•</span>
              <span class="text-caption text-grey-6">{{
                formatTime(item.last_modified)
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else-if="!searching" class="text-center q-pa-xl">
      <q-icon name="search_off" size="64px" color="grey-4" />
      <div class="text-h6 text-grey-6 q-mt-md">未找到相关结果</div>
      <div class="text-caption text-grey-5">尝试使用不同的关键词或检查拼写</div>
    </div>

    <!-- 分页 -->
    <div v-if="filteredResults.length > 0" class="row justify-center q-mt-lg">
      <q-pagination
        v-model="currentPage"
        :max="totalPages"
        :max-pages="6"
        boundary-numbers
        direction-links
      />
    </div>

    <!-- 确认删除对话框 -->
    <q-dialog v-model="showDeleteDialog" persistent>
      <q-card>
        <q-card-section class="row items-center">
          <q-avatar icon="warning" color="red" text-color="white" />
          <span class="q-ml-sm">确认删除</span>
        </q-card-section>

        <q-card-section>
          确定要删除选中的 {{ selectedItems.length }} 个文件吗？此操作不可撤销。
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="取消" v-close-popup />
          <q-btn
            unelevated
            label="删除"
            color="red"
            @click="confirmDelete"
            :loading="deleting"
          />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar";
import { browseDirectory, deleteItem, getDownloadInfo } from "src/js/cloudApi";
import { isLogin } from "src/js/common";

defineOptions({
  name: "SearchPage",
});

const route = useRoute();
const router = useRouter();
const $q = useQuasar();

// 响应式数据
const searchResults = ref([]);
const selectedItems = ref([]);
const searching = ref(false);
const deleting = ref(false);
const showDeleteDialog = ref(false);

// 搜索相关
const searchKeyword = ref("");

// 筛选相关
const fileTypeFilter = ref("all");
const fileTypeOptions = [
  { label: "全部类型", value: "all" },
  { label: "文件夹", value: "directory" },
  { label: "视频文件", value: "video" },
  { label: "图片文件", value: "image" },
  { label: "音乐文件", value: "music" },
  { label: "文档文件", value: "document" },
  { label: "其他文件", value: "other" },
];

// 排序相关
const sortBy = ref("filename");
const sortOrder = ref("asc");
const sortOptions = [
  { label: "按名称", value: "filename" },
  { label: "按类型", value: "file_type" },
  { label: "按修改时间", value: "last_modified" },
  { label: "按大小", value: "size" },
];

const sortOrderOptions = [
  { label: "升序", value: "asc" },
  { label: "降序", value: "desc" },
];

// 分页相关
const currentPage = ref(1);
const itemsPerPage = 50;

// 计算属性
const filteredResults = computed(() => {
  let results = searchResults.value;

  // 按文件类型筛选
  if (fileTypeFilter.value !== "all") {
    results = results.filter((item) => {
      if (fileTypeFilter.value === "directory") {
        return item.file_type === "directory";
      }

      const filename = item.filename.toLowerCase();
      const extension = filename.split(".").pop();

      switch (fileTypeFilter.value) {
        case "video":
          return [
            "mp4",
            "avi",
            "mov",
            "wmv",
            "flv",
            "mkv",
            "webm",
            "m4v",
            "3gp",
          ].includes(extension);
        case "image":
          return [
            "jpg",
            "jpeg",
            "png",
            "gif",
            "bmp",
            "webp",
            "svg",
            "ico",
            "tiff",
          ].includes(extension);
        case "music":
          return ["mp3", "wav", "flac", "aac", "ogg", "wma", "m4a"].includes(
            extension
          );
        case "document":
          return [
            "pdf",
            "doc",
            "docx",
            "xls",
            "xlsx",
            "ppt",
            "pptx",
            "txt",
            "rtf",
            "odt",
            "ods",
            "odp",
          ].includes(extension);
        case "other":
          return (
            item.file_type !== "directory" &&
            ![
              "mp4",
              "avi",
              "mov",
              "wmv",
              "flv",
              "mkv",
              "webm",
              "m4v",
              "3gp",
              "jpg",
              "jpeg",
              "png",
              "gif",
              "bmp",
              "webp",
              "svg",
              "ico",
              "tiff",
              "mp3",
              "wav",
              "flac",
              "aac",
              "ogg",
              "wma",
              "m4a",
              "pdf",
              "doc",
              "docx",
              "xls",
              "xlsx",
              "ppt",
              "pptx",
              "txt",
              "rtf",
              "odt",
              "ods",
              "odp",
            ].includes(extension)
          );
        default:
          return true;
      }
    });
  }

  return results;
});

// 排序后的结果列表
const sortedResults = computed(() => {
  const sorted = [...filteredResults.value].sort((a, b) => {
    let aVal, bVal;

    switch (sortBy.value) {
      case "filename":
        aVal = a.filename.toLowerCase();
        bVal = b.filename.toLowerCase();
        break;
      case "file_type":
        aVal = getFileTypeText(a).toLowerCase();
        bVal = getFileTypeText(b).toLowerCase();
        break;
      case "last_modified":
        aVal = new Date(a.last_modified).getTime();
        bVal = new Date(b.last_modified).getTime();
        break;
      case "size":
        aVal = a.size || 0;
        bVal = b.size || 0;
        break;
      default:
        aVal = a.filename.toLowerCase();
        bVal = b.filename.toLowerCase();
    }

    if (sortOrder.value === "asc") {
      return aVal > bVal ? 1 : -1;
    } else {
      return aVal < bVal ? 1 : -1;
    }
  });

  return sorted;
});

// 分页后的结果列表
const paginatedResults = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  return sortedResults.value.slice(start, end);
});

const totalPages = computed(() => {
  return Math.ceil(filteredResults.value.length / itemsPerPage);
});

// 选择相关计算属性
const selectAll = computed({
  get: () => {
    return (
      selectedItems.value.length === filteredResults.value.length &&
      filteredResults.value.length > 0
    );
  },
  set: (value) => {
    if (value) {
      selectedItems.value = [...filteredResults.value];
    } else {
      selectedItems.value = [];
    }
  },
});

const isPartiallySelected = computed(() => {
  return (
    selectedItems.value.length > 0 &&
    selectedItems.value.length < filteredResults.value.length
  );
});

// 方法
function highlightKeyword(text) {
  if (!searchKeyword.value || !text) return text;

  const regex = new RegExp(`(${searchKeyword.value})`, "gi");
  return text.replace(
    regex,
    '<mark style="background-color: yellow; padding: 2px;">$1</mark>'
  );
}

function getParentPath(fullPath) {
  const parts = fullPath.split("/");
  parts.pop(); // 移除文件名
  return parts.join("/") || "/";
}

function getFileIcon(file) {
  if (file.file_type === "directory") {
    return "folder";
  }

  const filename = file.filename.toLowerCase();
  const extension = filename.split(".").pop();

  // 视频文件
  if (
    ["mp4", "avi", "mov", "wmv", "flv", "mkv", "webm", "m4v", "3gp"].includes(
      extension
    )
  ) {
    return "videocam";
  }
  // 图片文件
  if (
    ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg", "ico", "tiff"].includes(
      extension
    )
  ) {
    return "image";
  }
  // 音乐文件
  if (["mp3", "wav", "flac", "aac", "ogg", "wma", "m4a"].includes(extension)) {
    return "music_note";
  }
  // 文档文件
  if (
    [
      "pdf",
      "doc",
      "docx",
      "xls",
      "xlsx",
      "ppt",
      "pptx",
      "txt",
      "rtf",
      "odt",
      "ods",
      "odp",
    ].includes(extension)
  ) {
    return "description";
  }

  return "insert_drive_file";
}

function getFileColor(file) {
  if (file.file_type === "directory") {
    return "primary";
  }

  const filename = file.filename.toLowerCase();
  const extension = filename.split(".").pop();

  // 视频文件
  if (
    ["mp4", "avi", "mov", "wmv", "flv", "mkv", "webm", "m4v", "3gp"].includes(
      extension
    )
  ) {
    return "red";
  }
  // 图片文件
  if (
    ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg", "ico", "tiff"].includes(
      extension
    )
  ) {
    return "green";
  }
  // 音乐文件
  if (["mp3", "wav", "flac", "aac", "ogg", "wma", "m4a"].includes(extension)) {
    return "orange";
  }
  // 文档文件
  if (
    [
      "pdf",
      "doc",
      "docx",
      "xls",
      "xlsx",
      "ppt",
      "pptx",
      "txt",
      "rtf",
      "odt",
      "ods",
      "odp",
    ].includes(extension)
  ) {
    return "blue";
  }

  return "grey";
}

function getFileTypeText(file) {
  if (file.file_type === "directory") {
    return "文件夹";
  }

  const filename = file.filename.toLowerCase();
  const extension = filename.split(".").pop();

  const typeMap = {
    // 视频
    mp4: "MP4视频",
    avi: "AVI视频",
    mov: "MOV视频",
    wmv: "WMV视频",
    flv: "FLV视频",
    mkv: "MKV视频",
    webm: "WebM视频",
    m4v: "M4V视频",
    "3gp": "3GP视频",
    // 图片
    jpg: "JPEG图片",
    jpeg: "JPEG图片",
    png: "PNG图片",
    gif: "GIF图片",
    bmp: "BMP图片",
    webp: "WebP图片",
    svg: "SVG图片",
    ico: "ICO图标",
    tiff: "TIFF图片",
    // 音乐
    mp3: "MP3音频",
    wav: "WAV音频",
    flac: "FLAC音频",
    aac: "AAC音频",
    ogg: "OGG音频",
    wma: "WMA音频",
    m4a: "M4A音频",
    // 文档
    pdf: "PDF文档",
    doc: "Word文档",
    docx: "Word文档",
    xls: "Excel表格",
    xlsx: "Excel表格",
    ppt: "PowerPoint",
    pptx: "PowerPoint",
    txt: "文本文件",
    rtf: "RTF文档",
    odt: "OpenDocument文本",
    ods: "OpenDocument表格",
    odp: "OpenDocument演示",
  };

  return typeMap[extension] || `${extension.toUpperCase()}文件`;
}

function formatSize(size) {
  if (!size) return "-";
  if (size < 1024) {
    return size + "B";
  } else if (size < 1024 * 1024) {
    return (size / 1024).toFixed(2) + "KB";
  } else if (size < 1024 * 1024 * 1024) {
    return (size / 1024 / 1024).toFixed(2) + "MB";
  } else {
    return (size / 1024 / 1024 / 1024).toFixed(2) + "GB";
  }
}

function formatTime(time) {
  if (!time) return "-";
  const date = new Date(time);
  const now = new Date();
  const diff = now - date;
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));

  if (days === 0) {
    return date.toLocaleTimeString();
  } else if (days === 1) {
    return "昨天 " + date.toLocaleTimeString();
  } else if (days < 7) {
    return `${days}天前`;
  } else {
    return date.toLocaleDateString();
  }
}

function toggleSelection(item) {
  const index = selectedItems.value.findIndex(
    (selected) => selected.full_path === item.full_path
  );
  if (index > -1) {
    selectedItems.value.splice(index, 1);
  } else {
    selectedItems.value.push(item);
  }
}

function toggleSelectAll() {
  if (selectAll.value) {
    selectedItems.value = [];
  } else {
    selectedItems.value = [...filteredResults.value];
  }
}

function clearSelection() {
  selectedItems.value = [];
}

function handleFilterChange() {
  currentPage.value = 1;
  selectedItems.value = [];
}

function handleSortChange() {
  currentPage.value = 1;
  selectedItems.value = [];
}

function sortByField(field) {
  if (sortBy.value === field) {
    sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
  } else {
    sortBy.value = field;
    sortOrder.value = "asc";
  }
}

function handleItemDoubleClick(item) {
  if (item.file_type === "directory") {
    // 跳转到目录
    router.push(`/?path=${encodeURIComponent(item.full_path)}`);
  } else {
    // 在新窗口中打开文件
    handleOpenFile(item);
  }
}

async function handleOpenFile(item) {
  try {
    // 创建新窗口打开文件
    const downloadInfo = await getDownloadInfo(item.full_path);
    if (downloadInfo.download_url) {
      window.open(downloadInfo.download_url, "_blank");
    }
  } catch (error) {
    console.error("打开文件失败:", error);
    $q.notify({
      type: "negative",
      message: "打开文件失败: " + (error.message || "未知错误"),
      position: "top",
    });
  }
}

async function handleDownload(item) {
  try {
    const downloadInfo = await getDownloadInfo(item.full_path);
    if (downloadInfo.download_url) {
      const link = document.createElement("a");
      link.href = downloadInfo.download_url;
      link.download = item.filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  } catch (error) {
    console.error("下载失败:", error);
    $q.notify({
      type: "negative",
      message: "下载失败: " + (error.message || "未知错误"),
      position: "top",
    });
  }
}

async function handleBatchDownload() {
  if (selectedItems.value.length === 0) return;

  for (const item of selectedItems.value) {
    if (item.file_type !== "directory") {
      await handleDownload(item);
    }
  }
}

function handleBatchDelete() {
  if (selectedItems.value.length === 0) return;
  showDeleteDialog.value = true;
}

async function confirmDelete() {
  try {
    deleting.value = true;

    for (const item of selectedItems.value) {
      await deleteItem(item.full_path, false);
    }

    $q.notify({
      type: "positive",
      message: `成功删除 ${selectedItems.value.length} 个文件`,
      position: "top",
    });

    selectedItems.value = [];
    showDeleteDialog.value = false;
    await performSearch();
  } catch (error) {
    console.error("删除失败:", error);
    $q.notify({
      type: "negative",
      message: "删除失败: " + (error.message || "未知错误"),
      position: "top",
    });
  } finally {
    deleting.value = false;
  }
}

// 递归搜索函数
async function searchInDirectory(path, keyword, results = []) {
  try {
    const data = await browseDirectory(path);
    const items = data.items || [];

    for (const item of items) {
      // 检查文件名是否包含关键词
      if (item.filename.toLowerCase().includes(keyword.toLowerCase())) {
        results.push(item);
      }

      // 如果是目录，递归搜索
      if (item.file_type === "directory") {
        await searchInDirectory(item.full_path, keyword, results);
      }
    }
  } catch (error) {
    console.error(`搜索目录 ${path} 失败:`, error);
  }
}

async function performSearch() {
  if (!isLogin.value) {
    $q.notify({
      type: "warning",
      message: "请先登录",
      position: "top",
    });
    return;
  }

  if (!searchKeyword.value.trim()) {
    $q.notify({
      type: "warning",
      message: "请输入搜索关键词",
      position: "top",
    });
    return;
  }

  try {
    searching.value = true;
    searchResults.value = [];

    // 从根目录开始搜索
    await searchInDirectory(
      "/",
      searchKeyword.value.trim(),
      searchResults.value
    );

    $q.notify({
      type: "positive",
      message: `搜索完成，找到 ${searchResults.value.length} 个结果`,
      position: "top",
      timeout: 2000,
    });
  } catch (error) {
    console.error("搜索失败:", error);
    $q.notify({
      type: "negative",
      message: "搜索失败: " + (error.message || "未知错误"),
      position: "top",
    });
  } finally {
    searching.value = false;
  }
}

// 监听路由变化
watch(
  () => route.query.keyword,
  (newKeyword) => {
    if (newKeyword) {
      searchKeyword.value = newKeyword;
      performSearch();
    }
  }
);

// 监听分页变化
watch(currentPage, () => {
  selectedItems.value = [];
});

onMounted(() => {
  if (!isLogin.value) {
    router.push("/");
    return;
  }
  // 从路由参数获取搜索关键词
  const keyword = route.query.keyword;
  if (keyword) {
    searchKeyword.value = keyword;
    performSearch();
  }
});
</script>

<style scoped>
.search-results {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.item-header {
  display: grid;
  grid-template-columns: 50px 1fr 200px 120px 150px 100px;
  gap: 16px;
  padding: 12px 16px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  font-weight: 600;
  font-size: 14px;
  color: #666;
}

.item-header > div {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.item-header > div:hover {
  color: #1976d2;
}

.item-row {
  display: grid;
  grid-template-columns: 50px 1fr 200px 120px 150px 100px;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.item-row:hover {
  background-color: #f8f9fa;
}

.item-row.selected {
  background-color: #e3f2fd;
}

.item-row:last-child {
  border-bottom: none;
}

.item-checkbox,
.item-name,
.item-path,
.item-type,
.item-time,
.item-size {
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-name {
  font-weight: 500;
}

.item-path {
  color: #666;
  font-size: 13px;
}

.selection-toolbar-top {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .desktop-view {
    display: none;
  }

  .mobile-view {
    display: block;
  }
}

@media (min-width: 769px) {
  .desktop-view {
    display: block;
  }

  .mobile-view {
    display: none;
  }
}

/* 移动端卡片样式 */
.mobile-item-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: white;
}

.mobile-item-card:hover {
  background-color: #f8f9fa;
  border-color: #1976d2;
}

.mobile-item-card.selected {
  background-color: #e3f2fd;
  border-color: #1976d2;
}

.mobile-item-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.mobile-item-name {
  flex: 1;
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-item-details {
  margin-left: 40px;
}

.mobile-item-path {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
</style>
